<template>
    <view :style="objColor">
      <view class="stopCon">
        <view class="title">若在小程序上结束{{chargeTypeStr}}后电桩仍在{{chargeTypeStr}}运行中：</view>
        <view class="textCon">
             <p>1、查看{{chargeTypeStr}}桩屏幕上是否有【结束{{chargeTypeStr}}】或【停止{{chargeTypeStr}}】类的操作按钮，如有此按钮，请点击该按钮，并根据屏幕指引操作，停止{{chargeTypeStr}}后确保{{chargeTypeStr}}桩停止{{chargeTypeStr}}后可拔枪离场。{{chargeTypeStr}}订单账单信息将会自动同步上传，届时前往个人中心查看{{chargeTypeStr}}订单明细即可。 </p>
             <p>2.若{{chargeTypeStr}}桩无屏幕或以上操作失败，可尝试在{{chargeTypeStr}}桩上找到【紧急急停】按钮，按下图指示操作完成后可直接拔枪。</p>
             <image
                class="img"
                src="https://oos-cn.ctyunapi.cn/front-end/static/cartoon/pic_1.png"
              ></image>
         </view>
         <view class="title">01.在{{chargeTypeStr}}桩上找到并<text class="textRed">按下急停按钮</text></view>
         <image
                class="img"
                src="https://oos-cn.ctyunapi.cn/front-end/static/cartoon/pic_2.png"
              ></image>
         <view class="title">02.<text class="textRed">再次按下并顺时针旋转</text>急停按钮</view>
         <image
                class="img"
                src="https://oos-cn.ctyunapi.cn/front-end/static/cartoon/pic_3.png"
              ></image>
              <view class="title">03.设备停止{{chargeTypeStr}}后可<text class="textRed">拔出{{chargeTypeStr}}枪</text></view>
      </view>

      <view class="orderClothes">
        如有疑问请联系<text class="orderClothesText" @tap="call">客服</text>
    </view>
      <uni-popup  ref="showCustomerPup" type="dialog">
            <uni-popup-dialog  type="info" cancelText="取消" confirmText="呼叫" title="温馨提示"  @confirm="callCustomer"
                @close="onCloseCustomer">
                <view>
                  <view class="info"><view class="infoTitle">联系客服：</view><text class="infoValue">{{ serviceInfo.customerTelephone }}</text></view>
                  <view class="info"><view class="infoTitle">工作时间：</view>{{ serviceInfo.customerServiceTime }}</view>
                </view>
            </uni-popup-dialog>
        </uni-popup>
    </view>
  </template>
  
  <script>
  "use strict";
  var https_1 = require("./../../../api/https.js");
  
  var util_1 = require("./../../../utils/util.js");
  export default {
    components: {
    
   
    },
    data() {
      return {
				chargeTypeStr: '充电', // #V2G功能
        serviceInfo: {
            customerTelephone: '',
            customerServiceTime: ''
        },
      };
    },
    /**
     * 生命周期函数--监听页面加载
     */
    onLoad: function (options) {
      // #V2G功能
      if (this.isV2GOption && options.disCharge) {
        this.chargeTypeStr = '放电'
        uni.setNavigationBarTitle({
          title: '无法停止放电'
        });
      }
  
   
      this.getRefundAmount()
    
    },
    /**
     * 用户点击右上角分享
     */
    onShareAppMessage: function () {},
    onPageScroll: function (e) {
      
    },
    methods: {
      

        //客服电话
        callCustomer: async function () {
          this.$refs.showCustomerPup.close()
        //#ifdef APP-PLUS
          let result = await this.$store.dispatch("requestPermissions",'CALL_PHONE')
          if (result !== 1){
            return
          }else{
            uni.makePhoneCall({
                phoneNumber: this.serviceInfo.customerTelephone
            });
          }    
        //#endif
        //#ifdef MP-WEIXIN
          uni.makePhoneCall({
              phoneNumber: this.serviceInfo.customerTelephone
          });
        //#endif
        },
        call: function () {
            this.$refs.showCustomerPup.open()
        },

        onCloseCustomer: function () {
            this.$refs.showCustomerPup.close()
        },

        getRefundAmount: function() {
            var that = this;
            https_1.refundAmount().then(function(res) {
                if (res.code == 0) {
                    that.setData({
                        serviceInfo: res.data
                    });
                }
            });
        },



        
    },
  };
  </script>
  <style lang="less">
  @import "../../../commin/commin.less";
  page {
    background-color: #f4f6f8;
    height: 100vh;
    padding-bottom: 40rpx;
  }
  .stopCon{
    background: linear-gradient(0deg, #ffffff, #f4f6f8);
    box-shadow: 4rpx 7rpx 20rpx 0rpx rgba(166, 171, 179, 0.24);
    border: 2rpx solid #ffffff;
    margin: 16rpx 24rpx;
    border-radius: 16rpx;
    margin-bottom: 20rpx;
    overflow: hidden;
    padding: 40rpx 40rpx;
  }
  .title{
    font-size: 34rpx;
    font-family: PingFang SC;
    font-weight: bold;
    color: #18181a;
  }
  .textCon{
    font-size: 28rpx;
    font-weight: 400;
    color: #606266;
    margin-top: 15rpx;
    
  }
  .img{
        width: 100%;
        height: 350rpx;
        margin: 24rpx 0;
    }

    .orderClothes{
        font-weight: 400;
        color: #606266;
        font-size: 24rpx;
        text-align: center;
        padding: 40rpx 0;
        .orderClothesText{
            color: var(--textColor);
        }
        }

        .info{
    .fontsize(30rpx);
    .lineheight(70rpx);
  font-family: PingFang SC;
  color: @text-color1;
  display: block;
  font-size: 30rpx;
  .infoTitle{
    display: inline-block;
    width: 5em;
    text-align: right;
  }
  .infoValue{
    color: @blue;
  }
  }
  .textRed{
    color:#FC724C
  }
  </style>
  